<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar :border-bottom="false" title="智慧农场" title-size="36"> </u-navbar>
        <view class="mer-top dis-flex flex-y-between">
          <view
            @click="tabsChange(index)"
            class="cate-item dis-flex flex-y-center"
            :class="current == index ? 'checked' : ''"
            v-for="(cate, index) in tabsList"
            :key="index"
          >
            <u-icon :name="cate.icon" size="90"></u-icon>
            <view> {{ cate.name }}</view>
          </view>
        </view>
        <!-- <u-gap height="20"></u-gap> -->
      </view>

      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item v-for="(item2, index2) in tabsList" :key="index2" class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[index2]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无数据~"
            :empty-view-img-style="imgStyle"
          >
            <view
              @click="routeTo('/farm/tudi-detail')"
              v-if="index2 == 0"
              class="tudi-box"
              v-for="item in itemList[index2]"
              :key="item.id"
            >
              <u-image
                border-radius="10rpx 10rpx 0rpx 0rpx"
                width="710rpx"
                height="360rpx"
                src=""
              ></u-image>
              <view class="tudi-detail">
                <view class="name">贵阳绿色农庄蔬菜种植示范基地</view>
                <view class="des twoline-hide"
                  >可种植的蔬菜种类有：白菜、白萝卜、青椒、西红柿、红萝卜、西蓝花、土豆、油麦菜等...</view
                >
                <view class="bottom dis-flex flex-y-between flex-y-center">
                  <view class="price"
                    >价格：<text style="color: #fa453c">¥</text
                    ><text class="num">2888</text>起</view
                  >
                  <view class="bt">选择土地</view>
                </view>
              </view>
            </view>
            <view
              v-if="index2 == 1"
              class="guoyuan-box"
              v-for="item in itemList[index2]"
              :key="item.id"
            >
              <view class="guoyuan-top dis-flex">
                <u-image border-radius="10rpx" width="178rpx" height="178rpx" src=""></u-image>
                <view class="guoy-l">
                  <view class="name">黄桃树认领</view>
                  <view class="jindu dis-flex flex-y-between flex-y-center">
                    <u-line-progress
                      style="width: 320rpx"
                      active-color="#10A28F"
                      height="20"
                      inactive-color="#E6E6E6"
                      :percent="70"
                      :show-percent="false"
                    ></u-line-progress>
                    <text>已认领60%</text>
                  </view>
                  <view class="bottom dis-flex flex-y-between">
                    <view class="price">¥150/棵</view>
                    <view class="bt">选择土地</view>
                  </view>
                </view>
              </view>
              <u-line color="#E6E6E6"></u-line>
              <view class="guoyuan-detail dis-flex flex-y-between">
                <view class="gy-item">
                  <view class="t">黄桃</view>
                  <view class="v">果蔬品种</view>
                </view>
                <view class="gy-item">
                  <view class="t">09月27日 </view>
                  <view class="v">预计收获时间</view>
                </view>
                <view class="gy-item">
                  <view class="t">100kg </view>
                  <view class="v">预计产量</view>
                </view>
              </view>
            </view>
            <view
              v-if="index2 == 2"
              class="guoyuan-box"
              v-for="item in itemList[index2]"
              :key="item.id"
            >
              <view class="guoyuan-top dis-flex">
                <u-image border-radius="10rpx" width="178rpx" height="178rpx" src=""></u-image>
                <view class="guoy-l">
                  <view class="name">园区2号地大白菜认领</view>
                  <view class="jindu dis-flex flex-y-between flex-y-center">
                    <u-line-progress
                      style="width: 320rpx"
                      active-color="#10A28F"
                      height="20"
                      inactive-color="#E6E6E6"
                      :percent="70"
                      :show-percent="false"
                    ></u-line-progress>
                    <text>已认领60%</text>
                  </view>
                  <view class="bottom dis-flex flex-y-between">
                    <view class="price">¥150/棵</view>
                    <view class="bt">选择土地</view>
                  </view>
                </view>
              </view>
              <u-line color="#E6E6E6"></u-line>
              <view class="guoyuan-detail dis-flex flex-y-between">
                <view class="gy-item">
                  <view class="t">黄桃</view>
                  <view class="v">果蔬品种</view>
                </view>
                <view class="gy-item">
                  <view class="t">09月27日 </view>
                  <view class="v">预计收获时间</view>
                </view>
                <view class="gy-item">
                  <view class="t">10㎡ </view>
                  <view class="v">栽种面积</view>
                </view>
                <view class="gy-item">
                  <view class="t">100kg </view>
                  <view class="v">预计产量</view>
                </view>
              </view>
            </view>
            <view
              v-if="index2 == 3"
              class="guoyuan-box"
              v-for="item in itemList[index2]"
              :key="item.id"
            >
              <view class="guoyuan-top dis-flex">
                <u-image border-radius="10rpx" width="178rpx" height="178rpx" src=""></u-image>
                <view class="guoy-l">
                  <view class="name">满山跑山鸡认养</view>
                  <view class="jindu dis-flex flex-y-between flex-y-center">
                    <u-line-progress
                      style="width: 320rpx"
                      active-color="#10A28F"
                      height="20"
                      inactive-color="#E6E6E6"
                      :percent="70"
                      :show-percent="false"
                    ></u-line-progress>
                    <text>已认领60%</text>
                  </view>
                  <view class="bottom dis-flex flex-y-between">
                    <view class="price">¥150/棵</view>
                    <view class="bt">选择土地</view>
                  </view>
                </view>
              </view>
              <u-line color="#E6E6E6"></u-line>
              <view class="guoyuan-detail dis-flex flex-y-between">
                <view class="gy-item">
                  <view class="t">黄桃</view>
                  <view class="v">果蔬品种</view>
                </view>
                <view class="gy-item">
                  <view class="t">09月27日 </view>
                  <view class="v">预计收获时间</view>
                </view>
                <view class="gy-item">
                  <view class="t">10㎡ </view>
                  <view class="v">栽种面积</view>
                </view>
                <view class="gy-item">
                  <view class="t">100kg </view>
                  <view class="v">预计产量</view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
// import GoodsBox from "./components/goods_box.vue"
export default {
  components: {
    // GoodsBox
  },
  data() {
    return {
      isFollow: true,
      keywords: '',
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '土地认领',
          icon: '/static/farm/tudi.png'
        },
        {
          name: '果园认领',
          icon: '/static/farm/guoyuan.png'
        },
        {
          name: '菜园认领',
          icon: '/static/farm/caidi.png'
        },
        {
          name: '家禽认养',
          icon: '/static/farm/jiaqin.png'
        }
      ],

      imgStyle: {
        width: '12rem'
      },
      itemList: []
    }
  },
  created() {
    if (this.tabsList.length > 0) {
      this.tabsList.forEach((tab) => {
        this.itemList.push([])
      })
    }
    this.queryList()
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    animationfinish(e) {
      this.scurrent = e.detail.current
      this.current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(this.scurrent)
      if (this.itemList[this.scurrent].length == 0) {
        this.queryList(1)
      }
    },
    searchGoods() {
      this.queryList()
    },
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList[this.scurrent] = []
      }
      this.$u
        .get('/app-api/system/notice/page', {
          shopId: this.shopId,
          keywords: this.keywords,
          status: 1,
          pageNo,
          pageSize
        })
        .then((res) => {
          // 使用 scurrent 来确定需要调用的分页组件
          let pagingRef = `paging1${this.scurrent}`
          this.$refs.paging[this.current].complete(res.data.list)
        })
    }
  }
}
</script>

<style lang="scss">
.slot-wrap {
  display: flex;
  align-items: center;
  .search-box {
    width: 420rpx;
    height: 60rpx;
    background: #f0f0f0;
    border-radius: 30rpx;
    padding: 0 20rpx;
    .search-icon {
      margin-right: 15rpx;
    }
    .input {
      font-size: 28rpx;
      color: #999999;
    }
  }
}
.tabsView {
  height: 100rpx;
}
.mer-top {
  // width: 100%;
  height: 180rpx;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx 24rpx;
  position: relative;
  margin: 20rpx;
  .cate-item {
    flex-flow: column;
    justify-content: space-between;
    font-size: 26rpx;
    color: #333333;
  }
  .checked {
    color: #10a28f;
    font-weight: 600;
    font-size: 28rpx;
  }
}
.swiperView {
  margin: 0 20rpx;
  .bt {
    width: 150rpx;
    height: 56rpx;
    line-height: 56rpx;
    text-align: center;
    background: #10a28f;
    border-radius: 28rpx;
    font-size: 24rpx;
    color: #ffffff;
  }
}
.tudi-box {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  .tudi-detail {
    padding: 30rpx 20rpx;
    .name {
      font-weight: 600;
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }
    .des {
      font-size: 24rpx;
      color: #999999;
      margin-bottom: 10rpx;
    }
    .bottom {
      font-size: 26rpx;
      .num {
        color: #fa453c;
        font-size: 32rpx;
      }
    }
  }
}
.guoyuan-box {
  background: #ffffff;
  border-radius: 10rpx;
  width: 100%;
  margin-bottom: 20rpx;
  padding: 30rpx 20rpx;
  .guoyuan-top {
    width: 100%;
    .guoy-l {
      flex: 1;
      margin-left: 20rpx;
      .name {
        font-size: 30rpx;
        color: #333333;
        margin-bottom: 30rpx;
      }
      .jindu {
        font-size: 22rpx;
        color: #999999;
        margin-bottom: 30rpx;
      }
      .bottom {
        font-weight: 600;
        font-size: 32rpx;
        color: #fb391d;
        margin-bottom: 23rpx;
      }
    }
  }
  .guoyuan-detail {
    margin-top: 20rpx;
    .gy-item {
      text-align: center;
      font-size: 24rpx;
      color: #333333;
      line-height: 36rpx;
    }
  }
}
</style>
